Event.observe ( window, 'load', bootstrap );

function bootstrap () {
  $( 'search'         ).observe ( 'click',  display_results );
  $( 'component_type' ).observe ( 'change', display_results );
  $( 'scope'          ).observe ( 'change', display_results );
  
  $( 'component_id' ).observe ( 'keypress', function ( event ) {
    if ( event.keyCode == Event.KEY_RETURN ) {
      display_results ();
      
      Event.stop ( event );
    }
  });
  
  var parameter = window.location.search.toQueryParams ();
  
  if ( parameter['component_type_is'] ) {
    $( 'component_type'  ).value = parameter['component_type_is'];
  }
  if ( parameter['scope_is'] ) {
    $( 'scope'           ).value = parameter['scope_is'];
  }
  
  if ( parameter['component_id_is'] ) {
    $( 'component_id'    ).value = parameter['component_id_is'];
    
    display_results ();
  }
  else if ( parameter['component_id_like'] ) {
    $( 'component_id'    ).value = parameter['component_id_like'];
    $( 'component_id_op' ).value = 'like';
    
    display_results ();
  }
}

function display_results () {
  var component_id_op = $( 'component_id_op' ).value;
  var component_id    = $( 'component_id'    ).value;
  var component_type  = $( 'component_type'  ).value;
  var scope           = $( 'scope'           ).value;
  
  if ( component_id != '' ) {
    if ( component_id.match ( /%/ ) ) {
      component_id_op = 'like';

      $( 'component_id_op' ).value = component_id_op;
    }

    var parameters = '';

    if ( component_id != '' ) {
      parameters = parameters + '?component_id_' + component_id_op + '=' + component_id;
    }
    if ( component_type != '' ) {
      parameters = parameters + '&component_type_is=' + component_type;
    }
    if ( scope != '' ) {
      parameters = parameters + '&scope_is=' + scope;
    }

    new Ajax.Request ( '/rest/search' + parameters, {
      method         : 'get',
      requestHeaders : { Accept : 'application/json' },
      onFailure      : function () {
        $( 'results' ).replace ( '<div id="results"><p>...</p></div>' );
      },
      onComplete     : function ( transport ) {
        var products = transport.responseJSON;

        var html = '<div id="results"><p class="error">No products!</p></div>';

        if ( products.size () ) {
          html =
            "<table id=\"results\" class=\"products sortable\">\n"
          + "  <thead>\n"
          + "    <tr>\n"
          + "      <th class=\"noedit\" id=\"product_id\"       >ID</th>\n"
          + "      <th class=\"noedit\" id=\"component_id\"     >Component ID</th>\n"
          + "      <th class=\"noedit\" id=\"component_version\">Component Version</th>\n"
          + ( component_type ? "" :
            "      <th class=\"noedit\" id=\"component_type\"   >Component Type</th>\n" )
          + ( scope ? "" :
            "      <th class=\"noedit\" id=\"scope_id\"         >Scope</th>\n"          )
          + "    </tr>\n"
          + "  </thead>\n"
          + "  <tfoot>\n"
          + "    <tr>\n"
          + "      <th                                          >ID</th>\n"
          + "      <th                                          >Component ID</th>\n"
          + "      <th                                          >Component Version</th>\n"
          + ( component_type ? "" :
            "      <th                                          >Component Type</th>\n" )
          + ( scope ? "" :
            "      <th                                          >Scope</th>\n"          )
          + "    </tr>\n"
          + "  </tfoot>\n"
          + "  <tbody>\n"
          ;

          var i = 1;

          products.each ( function ( h ) {
            html = html
            + "    <tr class=\"" + ( i % 2 ? "odd" : "even" ) + "\">\n"
            + "      <td><a href=\"/" + h.scope_id + "/product?id=" + h.product_id                                   + "\">" + h.product_id        + "</a></td>\n"
            + ( h.component_type == 'datasheet' ?
              "      <td><a href=\"/datasheet/commits?id="          + h.component_id                                 + "\">" + h.component_id      + "</a></td>\n"
            + "      <td><a href=\"/datasheet/issues?id="           + h.component_id + "&tag=" + h.component_version + "\">" + h.component_version + "</a></td>\n"
            : ( h.tracker_id_url ?
              "      <td><a href=\"" + h.tracker_id_url                                                              + "\">" + h.component_id      + "</a></td>\n"
            + ( h.tracker_version_url ?
              "      <td><a href=\"" + h.tracker_version_url                                                         + "\">" + h.component_version + "</a></td>\n"
            : "      <td>"                                                                                                   + h.component_version + "</td>\n" )
            : "      <td>"                                                                                                   + h.component_id      + "</td>\n"
            + "      <td>"                                                                                                   + h.component_version + "</td>\n" ) )
            + ( component_type ? "" :
              "      <td>"                                                                                                   + h.component_type    +     "</td>\n" )
            + ( scope ? "" :
              "      <td>"                                                                                                   + h.scope_id          +     "</td>\n" )
            + "    </tr>\n"
            ;

            i = i + 1;
          } );

          html = html
          + "  </tbody>\n"
          + "</table>\n"
          ;
        }

        $( 'results' ).replace ( html );
      }
    } );
  }
  else {
    $( 'results' ).replace ( '<div id="results"><p>...</p></div>' );
  }
}
